<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 网格布局</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      padding-bottom: 100px;
      margin: 0;
      display: flex;
    }

    .main {
      width: 50%;
      padding: 32px;
    }

    .box {
      display: grid;
      gap: 8px;
      background-color: aquamarine;
      padding: 8px;
      border-radius: 8px;
      width: 500px;
      height: 400px;
      overflow: hidden;
      resize: both;
      margin-bottom: 32px;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .item {
      background-color: cornflowerblue;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      font-family: Arial, Helvetica, sans-serif;
      color: #fff;
    }

    @media (max-width: 1280px) {
      .main1 {
        display: none;
      }

      .main2 {
        width: 100vw;
      }
    }
  </style>
</head>


<body>
  <div class="main main1">
    <h2>定义列和行</h2>
    <div class="box box1">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div>
    <style>
      .box1 {
        /* grid-template-rows: 1fr 1fr 1fr; 
        grid-template-columns: 1fr 1fr 1fr; */

        /* grid-template-rows: [x1] 1fr [x3] 2fr [x3] 1fr;
        grid-template-columns: [y1] 2fr [y2] 1fr [y3] 1fr; */

        /* grid-template-rows: 20% 30% 20% 1fr;
        grid-template-columns: 30% 50% 1fr; */

        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(4, 2fr);
      }
    </style>

    <h2>指定新增列和行的大小</h2>
    <div class="box box2">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div>
    <style>
      .box2 {
        /* 简写 */
        grid-template: repeat(2, 1fr) / repeat(3, 1fr);
        /* 设置行间距与列间距 */
        gap: 8px 32px;

        grid-auto-flow: 50px;
        grid-auto-columns: 10%;
      }
    </style>

    <h2>设置所有单元格内容的对齐</h2>
    <div class="box box3">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div>
    <style>
      .box3 {
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        align-items: start;
        justify-items: end;
        /* place-items: start end; */
      }
    </style>

    <h2>设置网格列和行的对齐</h2>
    <div class="box box4">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div>
    <style>
      /* 内容的对齐方式，前提是单元格有大小限制 */
      .box4 {
        grid-template: repeat(3, 100px) / repeat(3, 100px);
        /* justify-content: end;
        align-content: end; */
        place-content: center center;
        /* place-content: space-between space-around; */
      }
    </style>

    <h2>指定单元格区域</h2>
    <div class="box box5">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <!-- <div class="item item3">3</div> -->
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
    <style>
      /*  */
      .box5 {
        grid-template: repeat(3, 1fr) / 2fr 1fr 1fr 2fr;
        grid-template-areas:
          'a a c c'
          'a a c c'
          'a a h i';
      }

      .box5 .item1 {
        grid-area: a;
      }

      .box5 .item2 {
        grid-area: c;
      }

      .box5 .item3 {
        grid-area: g;
      }

      .box5 .item4 {
        grid-area: h;
      }

      .box5 .item5 {
        grid-area: i;
      }
    </style>

    <h2>单元格合并</h2>
    <div class="box box6">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
    </div>
    <style>
      .box6 {
        grid-template: repeat(5, 1fr) / repeat(3, 1fr);
        grid-auto-flow: column dense;
      }

      .box6 .item1 {
        /* grid-column-start: 1;
        grid-column-end: 3; */
        /* grid-column: 1/3; */
        grid-column: 1/span 2;
      }

      .box6 .item2 {
        /* grid-row-start: 1;
        grid-row-end: 3; */
        grid-row: 1/3;
      }

      .box6 .item3 {
        /* 指定网络编号: 行始 / 列始 / 行终 / 列终 */
        grid-area: 2 / 1 / 4 / 3;
      }

      .box6 .item4 {
        /* 列方向 合并2个单元格 */
        grid-column: span 2;
      }

      .box6 .item7 {
        /* 行方向 合并3个单元格 */
        grid-row: span 3
      }
    </style>

    <h2>设置单个单元格内容的对齐</h2>
    <div class="box box7">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
    </div>

    <style>
      .box7 {
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
      }

      .box7 .item1 {
        /* justify-self: center;
        align-self: center; */
        place-self: center center;
      }

      .box7 .item2 {
        place-self: start start;
      }

      .box7 .item3 {
        place-self: end end;
      }

      .box7 .item4 {
        place-self: start end;
      }

      .box7 .item5 {
        place-self: end start;
      }

      .box7 .item6 {
        place-self: stretch stretch;
      }
    </style>

  </div>
  <div class="main main2" style="background-color: #ebebeb;">
    <h2>固定列宽 200px，数量按宽度自适应的</h2>
    <div class="box box8">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div>
    <style>
      .box8 {
        width: auto;
        height: auto;
        grid-template-columns: repeat(auto-fit, 200px);
        grid-auto-rows: 50px;
      }

      .box8 .item {
        height: 50px;
      }
    </style>

    <h2>设置列的宽度范围 minmax(200px, 1fr)，数量按宽度自适应的</h2>
    <div class="box box9">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div>
    <style>
      .box9 {
        width: auto;
        height: auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-rows: 50px;
      }

      .box9 .item {
        height: 50px;
      }
    </style>

    <!-- <h2>单元格宽度不固定, 数量按宽度自适应的</h2>
    <div class="box box10">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
    </div> -->
    <style>
      .box10 {
        width: auto;
        height: auto;
        display: block;
        /* masonry 只有火狐支持 */
        /* display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: masonry; */

        columns: 3;
        column-gap: 16px;
      }

      .box10 .item {
        background-size: cover;
        width: 100%;
        margin-bottom: 10px;
        overflow: hidden;
        break-inside: avoid;
      }

      .box10 .item1 {
        height: 9em;
        background-image: url(https://picsum.photos/500/500?random=1);
      }

      .box10 .item2 {
        height: 8em;
        background-image: url(https://picsum.photos/500/500?random=2);
      }

      .box10 .item3 {
        height: 10em;
        background-image: url(https://picsum.photos/500/500?random=3);
      }

      .box10 .item4 {
        height: 11em;
        background-image: url(https://picsum.photos/500/500?random=4);
      }

      .box10 .item5 {
        height: 8em;
        background-image: url(https://picsum.photos/500/500?random=5);
      }

      .box10 .item6 {
        height: 12em;
        background-image: url(https://picsum.photos/500/500?random=6);
      }

      .box10 .item7 {
        height: 9em;
        background-image: url(https://picsum.photos/500/500?random=7);
      }

      .box10 .item8 {
        height: 7em;
        background-image: url(https://picsum.photos/500/500?random=8);
      }

      .box10 .item9 {
        height: 14em;
        background-image: url(https://picsum.photos/500/500?random=9);
      }

      @media (min-width: 1800px) {
        .box10 {
          columns: 4;
        }
      }


      @media (max-width: 1200px) {
        .box10 {
          columns: 3;
        }
      }

      @media (max-width: 1024px) {
        .box10 {
          columns: 2;
        }
      }

      @media (max-width: 768px) {
        .box10 {
          columns: 1;
        }
      }
    </style>


    <h2>两栏布局</h2>
    <div class="box box11">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
    </div>
    <style>
      .box11 {
        grid-template-columns: 100px auto;
      }
    </style>

    <h2>三栏布局</h2>
    <div class="box box12">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <style>
      .box12 {
        width: 600px;
        grid-template-columns: 100px auto 100px;
      }
    </style>

    <h2>上中下布局</h2>
    <div class="box box13">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <style>
      .box13 {
        width: 600px;
        grid-template-rows: 80px auto 80px;
      }
    </style>

    <h2>上中下布局</h2>
    <div class="box box14">
      <div class="item item1">Header</div>
      <div class="item item2">Side</div>
      <div class="item item3">Content</div>
      <div class="item item4">Side</div>
      <div class="item item5">Footer</div>
    </div>
    <style>
      .box14 {
        width: 100%;
        grid-template-columns: 120px auto 120px;
        grid-template-rows: 80px auto 50px;
        grid-template-areas:
          'header header header'
          'sidebar-left content sidebar-right'
          'footer footer footer';
      }

      .box14 .item1 {
        grid-area: header;
      }

      .box14 .item2 {
        grid-area: sidebar-left;
      }

      .box14 .item3 {
        grid-area: content;
      }

      .box14 .item4 {
        grid-area: sidebar-right;
      }

      .box14 .item5 {
        grid-area: footer;
      }

      @media (max-width: 1024px) {
        .box14 {
          grid-template-columns: 100px 1fr;
          grid-template-rows: 50px 100px 100px 50px;
          grid-template-areas:
            'header content' 
            'sidebar-left content'
            'sidebar-right content'
            'footer footer';
        }

        .box14 .item {
          font-size: 18px;
        }
      }

      @media (max-width: 768px) {
        .box14 {
          grid-template-columns: 1fr;
          grid-template-rows: 40px 50px 200px 50px 40px;
          grid-template-areas:
            'header'
            'sidebar-left'
            'content'
            'sidebar-right'
            'footer';
        }
      }
    </style>

  </div>
</body>

</html>